<template>
  <el-card class="categories-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span class="header-icon">
          <el-icon><Document /></el-icon>
        </span>
        <span class="header-title">分类</span>
        <el-button class="more-button" text @click="router.push('/categories')">
          <el-icon><ArrowRight /></el-icon>
        </el-button>
      </div>
    </template>

    <div class="categories-list">
      <router-link
        v-for="category in categories"
        :key="category.name"
        :to="{ name: 'category-articles', params: { categoryId: category.name }}"
        class="category-item"
      >
        <span class="category-name">{{ category.name }}</span>
        <el-tag size="small" type="info" effect="plain" class="category-count">{{ category.count }}</el-tag>
      </router-link>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { Document, ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const categories = [
  { name: 'Java', count: 3 },
  { name: '前端', count: 2 },
  { name: 'Postman', count: 1 },
  { name: 'Spring Cloud Alibaba', count: 1 },
  { name: 'Spring Boot', count: 0 },
  { name: 'Netty', count: 0 },
  { name: '团队管理', count: 0 },
  { name: '设计模式', count: 0 }
]
</script>

<style scoped>
.categories-card {
  margin-bottom: 24px;
  border-radius: 2px;
  background-color: #fff;
}

.card-header {
  display: flex;
  align-items: center;
  padding: 16px 0;
}

.header-icon {
  margin-right: 8px;
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.45);
}

.header-title {
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}

.more-button {
  margin-left: auto;
  color: rgba(0, 0, 0, 0.45);
}

.more-button:hover {
  color: var(--accent-color);
}

.categories-list {
  display: flex;
  flex-direction: column;
}

.category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 2px;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.65);
  transition: all 0.3s;
}

.category-item:hover {
  color: var(--accent-color);
  background-color: rgba(0, 0, 0, 0.02);
}

.category-name {
  font-size: 14px;
}

.category-count {
  font-size: 12px;
  background-color: transparent;
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.45);
}

:deep(.el-card__header) {
  padding: 0;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.el-card__body) {
  padding: 0;
}
</style>
